/* 用户h5列表页面
 * H5List.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { push } from 'redux-router';

import '../../static/css/h5list.css';

import {getPageComponents} from '../../utils/H5helper';
import {listH5Data,clearListH5Data,createNewH5,deleteThisH5,updateH5Title} from '../../actions/h5/H5Action';



//单个页面
class SingePage extends Component{

	componentDidMount(){
		$("#pageItem_"+this.props.id).find(".editBtn").popup({position:"right center"});
		$("#pageItem_"+this.props.id).find(".trashBtn").popup({position:"right center"});
		$("#pageItem_"+this.props.id).find(".infoBtn").popup({position:"right center"});
		$("#pageItem_"+this.props.id).find(".dataBtn").popup({position:"right center"});
		$("#pageItem_"+this.props.id).find(".cloudBtn").popup({position:"right center"});
		
		//鼠标的移入移出,显示h5标题和发布状态
        $("#pageItem_"+this.props.id).mouseover(function (){  
            $(this).find('.bottomInfo').show();
            $(this).find('.qrInfo').show();
        }).mouseout(function (){  
            $(this).find('.bottomInfo').hide();
            $(this).find('.qrInfo').hide();
        }); 
	}

	componentWillUnmount(){
		$("#pageItem_"+this.props.id).find(".editBtn").popup('remove popup');
		$("#pageItem_"+this.props.id).find(".trashBtn").popup('remove popup');
		$("#pageItem_"+this.props.id).find(".infoBtn").popup('remove popup');
		$("#pageItem_"+this.props.id).find(".dataBtn").popup('remove popup');
		$("#pageItem_"+this.props.id).find(".cloudBtn").popup('remove popup');
	}

	toEditPage(){
		$(".editBtn").popup('hide');
		this.props.dispatch(push(__ROOTPATH__+'h5edit/edit/' + this.props.uniqueCode));
	}

	deletePage(){
		$(".trashBtn").popup('hide');
		const deleteFun=()=>{
			this.props.dispatch(deleteThisH5(this.props.id));
		};
		$('#pageDelConfirm').modal({
    		closable  : false,
		    onApprove : deleteFun
		  }).modal('show');
	}

	showTitlePopup(){
		
		$("#titleInfoPopup").modal({
    		closable  : false,
    		onShow : ()=>{
    			$(".infoBtn").popup('hide');
    			$("#popupTitle").val(this.props.title);
    		},
    		onApprove : ()=>{
    			console.log($("#popupTitle").val()+'-----'+this.props.id);
				this.props.dispatch(updateH5Title(this.props.id,$("#popupTitle").val()));
    		}
		  }).modal('show');
	}

	publicSet(){
		$(".cloudBtn").popup('hide');
		this.props.dispatch(push(__ROOTPATH__+'h5edit/publicSet/' + this.props.uniqueCode));
	}

	toFormDataList(){
		$(".dataBtn").popup('hide');
		this.props.dispatch(push(__ROOTPATH__+'h5edit/formDataList/' + this.props.uniqueCode));
	}

	render(){
		let rightButtons=(
				<div className="ui vertical icon buttons">
				  <div className="ui button editBtn" data-content="编辑" onClick={()=>this.toEditPage()}><i className="edit icon"></i></div>
				  <div className="ui button trashBtn" data-content="删除并下线" onClick={()=>this.deletePage()}><i className="trash icon"></i></div>
				  <div className="ui button infoBtn" data-content="修改标题" onClick={()=>this.showTitlePopup()}><i className="info icon"></i></div>
				  <div className="ui button dataBtn" data-content="表单数据" onClick={()=>this.toFormDataList()}><i className="bar chart icon"></i></div>
				  <div className="ui button cloudBtn" data-content="发布设置" onClick={()=>this.publicSet()}><i className="cloud icon"></i></div>
				</div>
			);
		if(this.props.notShowBtns){
			rightButtons='';
		}
		let statusInfo='';
		let qrInfo='';
		if(this.props.status===0){
			statusInfo=(<p className="status">状态：未发布</p>);
		}else if(this.props.status===1){
			statusInfo=(<p className="status" style={{color:'#00ff40'}}>状态：已发布</p>);
			const imgBase64='data:image/png;base64,'+this.props.qrcode;
			qrInfo=(
				<div className="qrInfo">
					<img src={imgBase64} style={{display:'block',width:'160px',height:'160px'}} />	
				</div>
			);
		}
		return(
			<div className="column">
				<div className="list-item-wrap">
				    <div className="list-item-view" id={'pageItem_'+this.props.id}>
				    	{this.props.children}
				    	{rightButtons}
				    	{qrInfo}
				    	<div className="bottomInfo">
				    		<p className="title">{this.props.title}</p>
				    		{statusInfo}
				    	</div>
				    </div>
				</div>
			</div>
		);
	}
}

//显示的空白新增H5的页面
class EmptyPage extends Component{

	toNewPage(uniqueCode){
		this.props.dispatch(push(__ROOTPATH__+'h5edit/edit/'+uniqueCode));
	}

	newPage(){
		this.props.dispatch(createNewH5(this.toNewPage.bind(this)));
		//this.props.dispatch(push(__ROOTPATH__+'h5edit/edit/newAdd'));
	}

	render(){
		const emptyPage=(<div className="empty" onClick={()=>this.newPage()}>
							<i className="add circle icon"></i>
						</div>);
		return(<SingePage notShowBtns={true} title='新建H5页面'>{emptyPage}</SingePage>);
	}
}
//含有数据库内容的页面
class ContentPage extends Component{

	render(){
		const pageData=this.props.pageData;
		const components=getPageComponents(pageData);
		const pageAttr=pageData.get('attributes');
		const bkstyle={opacity: pageAttr.get('backgroundOpacity'), background:pageAttr.get('background'),backgroundSize:'cover!important'};
		let pageContent=(<div className="page-thumbnail">
							<div className="backface" style={bkstyle}></div>
							{components}
						</div>);
		return (<SingePage {...this.props}>{pageContent}</SingePage>)
	}
}

//标题设置弹出框
class TitleSetPopup extends Component{
	constructor(props){
		super(props);
	}

	render(){
		return(
			<div id="titleInfoPopup" className="ui modal">
			  <i className="close icon"></i>
			  <div className="header">标题设置</div>
			  <div className="content">
			    <div className="description">
					<input id="popupTitle" className="form-control" type="text" />
			    </div>
			  </div>
			  <div className="actions">
			    <div className="ui black button cancel">取消</div>
			    <div className="ui positive right labeled icon button">
			      确认修改<i className="checkmark icon"></i>
			    </div>
			  </div>
			</div>
		);
	}
}
//删除确认弹出框
class DeleteConfirmPopup extends Component{
	constructor(props){
		super(props);
	}

	render(){
		return(
			<div id="pageDelConfirm" className="ui small modal">
			  <i className="close icon"></i>
			  <div className="header">删除当前H5内容</div>
			  <div className="content">
			      <p>你确认要删除这个H5？</p>
			  </div>
			  <div className="actions">
			      <div className="ui red deny button">不</div>
			      <div id="deleteConfirm" className="ui positive right labeled icon button">
			        是的<i className="checkmark icon"></i>
			      </div>
			  </div>
			</div>
		);
	}
}

class H5List extends Component{
	constructor(props){
		super(props);
	}

	componentDidMount(){
		this.props.dispatch(listH5Data(null,9));
	}

	componentWillUnmount(){
		this.props.dispatch(clearListH5Data());
		$(".ui.dimmer.modals").find("#titleInfoPopup").remove();
		$(".ui.dimmer.modals").find("#pageDelConfirm").remove();
	}

	loadMoreData(){
		const lastData=this.props.datalist.last();
		this.props.dispatch(listH5Data(lastData.get('id'),10));
	}

	render(){
		let pagelist=Array();
		this.props.datalist.forEach(item=>{
			if(item && Immutable.Map.isMap(item)){
				const cprops={
					dispatch:this.props.dispatch,
					title:item.get('title'),
					pageData:Immutable.fromJS(item.get("first_page")),
					status:item.get('is_public'),
					id:item.get('id'),
					uniqueCode:item.get('unique_code'),
					qrcode:item.get('qr_code')
				};
				pagelist.push(<ContentPage key={item.get('id')} {...cprops} />);
			}
		});

		let btnCss="ui primary button";
		if(this.props.loadingData){
			btnCss="ui primary loading button";
		}

		return(
			<div style={{margin:'1rem'}}>
				<div className="ui five column grid" style={{margin:'0px 10px'}}>
					<EmptyPage dispatch={this.props.dispatch} />
					{pagelist}
				</div>
				{/*加载数据按钮*/}
				<div style={{width:'200px',margin:'20px auto'}}>
					<div className={btnCss} onClick={this.loadMoreData.bind(this)}>加载更多数据</div>
				</div>
				{/*删除确认弹出框*/}
				<DeleteConfirmPopup />
				{/*修改标题*/}
				<TitleSetPopup />
			</div>
		);
	}
}

export default connect(state=>{
	return{
		datalist:state.app.h5DataList.datalist,
		loadingData:state.app.h5DataList.loadingData
	};
})(H5List);
